<template>
    <div class="edtiArticle">
        <div class="drawerTop">
            <el-form label-width="82px" size="default" :rules="editFormRules" :model="editForm" ref="editFormRef">
                <!-- <div class="title">编辑底部信息</div> -->
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="基本信息" name="1"></el-tab-pane>
                    <el-tab-pane label="办公电话" name="2"></el-tab-pane>
                    <el-tab-pane label="友情链接" name="3"></el-tab-pane>
                </el-tabs>
                <div class=seetingBox>
                    <div v-if="Number(activeName) == 1">
                        <el-form-item label="学校logo" prop="logo">
                            <CropperImage :avatar="editForm.logo" @changeImage="changeImage" @clearImage="clearImage"
                                :width="283" :height="60" :autoCropWidth="420" :autoCropHeight="60" dir="school_logo"
                                :needCropper="false" :noBgcolor="true">
                            </CropperImage>
                            <div class="tips">
                                <el-image :src="icon_tishi" width="20"></el-image>
                                建议上传大小为420 * 60 像素,上传png/jpeg/jpg等格式
                            </div>
                        </el-form-item>
                        <!-- <el-form-item label="公众号" prop="wechat_official">
                        <CropperImage :avatar="editForm.wechat_official" @changeImage="changeImage2"
                            @clearImage="clearImage2" :width="90" :height="90" :autoCropWidth="90" :autoCropHeight="90"
                            dir="inch" tips="点击上传"></CropperImage>
                        <div class="tips">
                            <el-image :src="icon_tishi" width="20"></el-image>
                            建议上传大小为90 * 90 像素,上传png/jpeg/jpg等格式
                        </div>
                    </el-form-item> -->
                        <el-form-item label="学校地址" prop="address">
                            <el-input v-model="editForm.address" style="width:100%;" placeholder="请输入集团地址">
                            </el-input>
                        </el-form-item>
                        <!-- <el-form-item label="办公室电话" prop="mobile">
                        <el-input v-model="editForm.mobile" style="width:100%;" placeholder="请输入集团邮箱">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="教导处电话" prop="phone" style="margin-bottom: 10px;">
                        <el-input v-model="editForm.phone" style="width:100%;" placeholder="请输入联系电话">
                        </el-input>
                    </el-form-item> -->
                        <el-form-item label="声明内容" style="margin-bottom: 5px;">
                            <el-input type="textarea" v-model="editForm.tips" :rows="3" placeholder="请输入备注"></el-input>
                        </el-form-item>
                    </div>
                    <div v-if="Number(activeName) == 2">
                        <!-- <el-form-item label="各部门办公电话" label-width="124px" style="margin-bottom: 5px;">
                        </el-form-item> -->
                        <div class="FriendLink" v-for="(item, index) in editForm.phoneList" :key="index">
                            <div class="leftBox">
                                <el-form-item label="名称" label-width="40px" style="margin-bottom: 10px;">
                                    <el-input v-model.trim="item.name" style="width:100%;" placeholder="请输入名称">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="电话" label-width="40px">
                                    <el-input v-model.trim="item.value" style="width:100%;" placeholder="请输入电话号码">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="rightBox">
                                <el-image :src="icon_jian" v-if="editForm.friendLink.length != 1"
                                    @click="delItem2(index)" width="32"></el-image>
                                <el-image :src="icon_jia" @click="addItem2(index)" width="32"></el-image>
                            </div>
                        </div>
                    </div>
                    <div v-if="Number(activeName) == 3">
                        <!-- <el-form-item label="友情链接" style="margin-bottom: 5px;">
                        </el-form-item> -->
                        <div class="FriendLink" v-for="(item, index) in editForm.friendLink" :key="index">
                            <div class="leftBox">
                                <el-form-item label="名称" label-width="40px" style="margin-bottom: 10px;">
                                    <el-input v-model.trim="item.name" style="width:100%;" placeholder="请输入名称">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="链接" label-width="40px">
                                    <el-input v-model.trim="item.link" style="width:100%;" placeholder="请输入链接">
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="rightBox">
                                <el-image :src="icon_jian" v-if="editForm.friendLink.length != 1"
                                    @click="delItem(index)" width="32"></el-image>
                                <el-image :src="icon_jia" @click="addItem(index)" width="32"></el-image>
                            </div>
                        </div>
                    </div>
                </div>
            </el-form>
            <div class="fixed-btn-box2">
                <el-button type="primary" @click="submitForm(editFormRef)">保存更改</el-button>
                <el-button type="primary" class="white-bg-btn" plain @click="resetForm(editFormRef)">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ref, h, onMounted, reactive, watch, toRaw } from 'vue'
import icon_tishi from '../../../assets/images/icon_tishi.png'
import icon_jia from '../../../assets/images/icon_jia.png'
import icon_jian from '../../../assets/images/icon_jian.png'
import { editSitecfgCfg } from '../../Api/Setting'
interface PropsType {
    infoData?: any
    id?: string
}
const props = withDefaults(defineProps<PropsType>(), {
    infoData: {},
    id: ''
})
interface EmitType {
    (e: 'getConfig'): void
    (e: 'getConfigInfo', data: any): void
}
const emit = defineEmits<EmitType>()
const activeName = ref('1')
const editForm = ref<any>({
    logo: '', // 学校logo
    // wechat_official: '', // 公众号图片
    address: '', // 集团地址
    // mobile: '', // 办公室电话
    // phone: '', // 教导处电话
    phoneList: [
        {
            name: '',
            value: '',
        }
    ],
    friendLink: [
        {
            name: '',
            link: '',
        }
    ],
    tips: '', // 声明内容
})
const editFormRef = ref<FormInstance>()
const editFormRules = reactive<FormRules>({
    // logo: [{ required: true, message: '请上传学校logo', trigger: 'blur' }],
})
const changeImage = (res: any) => {
    editForm.value.logo = res.inch
}
const clearImage = () => {
    editForm.value.logo = ''
}
const changeImage2 = (res: any) => {
    editForm.value.wechat_official = res.inch
}
const clearImage2 = () => {
    editForm.value.wechat_official = ''
}
const addItem = (index: number) => {
    // 添加的时候判断桑一个是否填写了名字
    if (!editForm.value.friendLink[index].name) {
        return ElMessage.error('请填写完整信息再提交!')
    }
    editForm.value.friendLink.push({
        name: '',
        link: '',
    })
}
const delItem = (index: number) => {
    editForm.value.friendLink.splice(index, 1)
}
const addItem2 = (index: number) => {
    // 添加的时候判断桑一个是否填写了名字
    if (!editForm.value.phoneList[index].name) {
        return ElMessage.error('请填写完整信息再提交!')
    }
    editForm.value.phoneList.push({
        name: '',
        value: '',
    })
}
const delItem2 = (index: number) => {
    editForm.value.phoneList.splice(index, 1)
}
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid: any) => {
        if (valid) {
            const res: any = await editSitecfgCfg({ id: props.id, cfg_val: JSON.stringify(editForm.value) })
            if (res.code !== 1) return ElMessage.error(res.msg)
            ElMessage.success(res.msg)
            emit('getConfig')
            setTimeout(() => {
                if (props.infoData && Object.keys(props.infoData).length !== 0) {
                    editForm.value = JSON.parse(JSON.stringify(props.infoData))
                }
            }, 500);
        } else {
            console.log('error submit!')
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    // if (!formEl) return
    emit('getConfig')
    setTimeout(() => {
        if (props.infoData && Object.keys(props.infoData).length !== 0) {
            editForm.value = JSON.parse(JSON.stringify(props.infoData))
        }
    }, 500);
    // formEl.resetFields()
}
watch(
    () => editForm.value,
    (newVal: any, oldVal: any) => {
        emit('getConfigInfo', JSON.stringify(editForm.value))
    },
    { deep: true, immediate: true }
)
onMounted(() => {
    if (props.infoData && Object.keys(props.infoData).length !== 0) {
        editForm.value = JSON.parse(JSON.stringify(props.infoData))
        if (!editForm.value.hasOwnProperty('phoneList')) {
            editForm.value.phoneList = []
            editForm.value.phoneList.push({
                name: '',
                value: '',
            })
        }
    }
})
defineExpose({ editForm, submitForm, editFormRef })
</script>
<style lang="scss" scoped>
.edtiArticle {
    height: 100%;

    .drawerTop {
        height: 100%;
        position: relative;

        .el-form {
            height: 100%;
        }

        .title {
            height: 48px;
            line-height: 48px;
            border-bottom: 1px solid #E4E4E4;
            font-weight: bold;
            font-size: 14px;
            color: #333333;
            padding: 0 20px;
        }

        .seetingBox {
            padding: 10px;
            height: calc(100% - 130px);
            overflow-y: scroll;
            box-sizing: border-box;

            .tips {
                display: flex;
                font-size: 12px;
                align-items: center;

                .el-image {
                    display: flex;
                    align-items: center;
                    margin-right: 5px;
                }
            }

            .FriendLink {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                padding: 0 10px;

                .leftBox {
                    flex: 1;
                    background: #F5F5F5;
                    border-radius: 4px 4px 4px 4px;
                    padding: 0 18px;
                    padding-top: 18px;
                }

                .rightBox {
                    width: 32px;
                    margin-left: 15px;

                    .el-image {
                        margin: 2px 0;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .fixed-btn-box2 {
        left: 0px;
        right: 0px;
        position: absolute;
        bottom: 0px;
        box-shadow: 0px -3px 4px 1px rgba(0, 0, 0, 0.06);

        .el-button {
            margin: 15px;
            margin-right: 15px;
            margin-left: 0px;
            float: right;
        }
    }
}

:deep(.el-tabs) {
    --el-tabs-header-height: 48px;
}

:deep(.el-tabs__nav-scroll) {
    padding: 0 20px;
}

:deep(.el-tabs__nav-wrap::after) {
    height: 1px;
    background-color: #E4E4E4;
}
:deep(.el-tabs__item.is-active) {
    font-weight: 600;
}
</style>